<template>
	<view class="box">
		<view class="shang">


			<image @click="dian"
				src="https://tse2-mm.cn.bing.net/th/id/OIP-C.ccnaJ-Fy-Xh-hXSVSfuzCQHaEK?rs=1&pid=ImgDetMain" mode="">
			</image>

			<view class="LookMsg" @click="chakan">查看资料>></view>

		</view>
		<view v-if="show" class="tan">
			<div class="dingWei">
				<button class="butt" @click="gotoUp">更换形象</button>
				<button class="butt" @click="close">取消</button>
			</div>

		</view>

		<view class="xia">
			<view id="hezi" @click="history">

				<image src="../../shixun2-image/s1.png" mode=""></image>
				<view class="wenzhen">历史问诊</view>

			</view>
			<view id="hezi" @click="recommendation">
				<image src="../../shixun2-image/x1.png" mode=""></image>
				<view class="wenzhen">被采纳建议</view>
			</view>
			<view id="hezi" @click="qianbao">
				<image src="../../shixun2-image/s2.png" mode=""></image>
				<view class="wenzhen">我的钱包</view>
			</view>
			<view id="hezi" @click="zidong">
				<image src="../../shixun2-image/x2.png" mode=""></image>
				<view class="wenzhen">设置自动回复</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		methods: {
			gotoUp() {
				uni.navigateTo({
					url: "/pages/Update/Update"
				})
			},
			close() {
				this.show = false
			},
			dian() {
				this.show = !this.show
			},
			chakan() {
				uni.navigateTo({
					url: '/pages/PersonalData/PersonalData'
				})
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			history() {
				uni.navigateTo({
					url: '../HistoricalConsultation/HistoricalConsultation'
				})
			},
			recommendation() {
				uni.navigateTo({
					url: '/pages/AcceptedSuggestion/AcceptedSuggestion'
				})
			},
			qianbao() {
				uni.navigateTo({
					url: '/pages/MyWallet/MyWallet'
				})
			},
			zidong() {
				uni.reLaunch({
					url: '/pages/SetAutomaticReply/SetAutomaticReply'
				})
			}
		}
	}
</script>

<style>
	.tan {
		width: 100vw;
		height: 100Vh;
		background-color: #ccc;
		background: rgba(0, 0, 0, 0.5);
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 999;


	}

	.dingWei {
		width: 714rpx;
		position: absolute;
		left: 0;
		bottom: 30rpx;
		padding: 20rpx;
	}

	.butt {
		margin-bottom: 20rpx;
		border-radius: 15rpx;
	}

	.shang {
		width: 100%;
		height: 400rpx;
		position: relative;
		border-bottom: 1px solid #ccc;
	}

	.shang image {
		width: 100%;
		height: 100%;
	}

	.LookMsg {
		color: #55aaff;
		position: absolute;
		right: 20rpx;
		bottom: 50rpx;
		font-weight: 600;
	}

	.xia {
		column-count: 2;


	}

	#hezi {
		width: 40vw;
		height: 25vh;
		border: 1px solid #ccc;
		border-radius: 15rpx;
		margin: 20rpx;
		position: relative;

		text-align: center;

	}

	.xia view image {
		width: 30%;
		height: 30%;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#hezi .wenzhen {
		padding-top: 300rpx;

	}
</style>